<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '波段定投收益',
  },
}
</route>
<template>
  <PageLayout :navbarShow="true" navTitle="波段定投收益">
    <!--表头-->
    <wd-row
      style="
        text-align: center;
        padding: 20rpx 30rpx;
        color: #8a8a8a;
        border-bottom: 1px solid #f2f2f2;
        background-color: #fff;
        font-size: 24rpx;
      "
    >
      <wd-col :span="6" style="text-align: left">时间</wd-col>
      <wd-col :span="6">定投次数</wd-col>
      <wd-col :span="6">定投收益率</wd-col>
      <wd-col :span="6">常规收益率</wd-col>
    </wd-row>
    <!--骨架屏-->
    <view v-if="showLoadingView">
      <wd-skeleton v-for="i in 6" :key="i" theme="paragraph" style="margin-bottom: 10rpx" />
    </view>

    <!--空数据提示-->
    <wd-status-tip
      image="../../static/content.png"
      tip="暂未添加自选基金"
      v-else-if="!showLoadingView && dataList.length == 0"
    />

    <!--滚动-->
    <scroll-view v-else scroll-y style="background-color: #fff">
      <wd-row
        v-for="(data, index) in dataList"
        :key="index"
        style="padding: 20rpx 20rpx; text-align: center; font-size: 24rpx"
      ></wd-row>

      <!--间隔槽-->
      <wd-gap></wd-gap>
    </scroll-view>
  </PageLayout>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { http } from '@/utils/http'
import { useMessage, useToast } from 'wot-design-uni'

defineOptions({
  name: 'addChoose',
  options: {
    styleIsolation: 'shared',
  },
})
const message = useMessage()
const toast = useToast()
// 显示加载中的段落
const showLoadingView = ref(true)
// 数据列表
const dataList = ref([])
// 分组列表
const groupList = ref([])
// 分组名称
const groupName = ref('')
// 原分组
const initGroup = ref([])
// 加载数据
const loadData = () => {
  // 设置
  showLoadingView.value = true
  // 参数
  const params = {
    pageNo: 1,
    pageSize: 1000,
  }
  http.get('/sys/fund/optional/list', params).then((res: any) => {
    if (res.success) {
      dataList.value = res.result.records
      showLoadingView.value = false
    }
  })
}

// 批量删除
const remove = () => {
  // 遍历给选择的数据赋值
  const paramList = []
  dataList.value.forEach((e) => {
    if (e.checked) {
      paramList.push({ id: e.id })
    }
  })
  if (paramList.length === 0) {
    toast.error('请选择数据')
    return false
  }
  message
    .confirm({
      msg: '是否批量删除选中的数据？',
      title: '提示',
    })
    .then(() => {
      // 发起请求
      http.post('/sys/fund/optional/batchDelete', paramList).then((res: any) => {
        if (res.success) {
          loadData()
        }
      })
    })
    .catch(() => {
      console.log('点击了取消按钮')
    })
}

// 排序改变
const changeDraggableItem = () => {
  const param = []
  for (let i = 0; i < dataList.value.length; i++) {
    const data = dataList.value[i]
    param.push({ id: data.id, orderBy: i })
  }
  // 发起请求，进行排序变更
  http.post('/sys/fund/optional/batchUpdate', param).then((res: any) => {
    if (res.success) {
      console.log('排序成功')
    }
  })
}

// 加载分组列表
const loadGroupList = () => {
  http.get('/sys/fund/optional/groupList').then((res: any) => {
    if (res.success) {
      // 结果集
      const result = res.result
      // 赋值初始数组
      initGroup.value = result
      // 数据
      const data = ['默认']
      // 遍历
      result.forEach((i) => {
        data.push(i.name)
      })
      groupList.value = data
    }
  })
}

onShow(() => {
  loadData()
  loadGroupList()
})
</script>

<style lang="scss" scoped>
.wrap {
  background: linear-gradient(to bottom, #daf0fe, #f9fbfb);
}
</style>
